<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:58
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 对象的解构
// 引入Gauge仪表盘
import { Gauge } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    // let gauge = null;
    // 将实例化对象的函数封装起来
    let initChart = () => {
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ["#F4664A", "#FAAD14", "#30BF78"];
      // 实例化一个Gauge对象
      const gauge = new Gauge(root.value, {
        percent: 0,
        innerRadius: 0.75,
        type: "meter",
        // 自定义 meter 总步数 以及 step 占比
        meter: {
          steps: 50,
          stepRatio: 0.6,
        },
        range: {
          ticks: [0, 1],
          color: ["l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78"],
        },
        indicator: {
          pointer: {
            style: {
              stroke: "#D0D0D0",
            },
          },
          pin: {
            style: {
              stroke: "#D0D0D0",
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return "差";
              }
              if (percent < ticks[2]) {
                return "中";
              }
              return "优";
            },
            style: ({ percent }) => {
              return {
                fontSize: "36px",
                lineHeight: 1,
                color:
                  percent < ticks[1]
                    ? color[0]
                    : percent < ticks[2]
                    ? color[1]
                    : color[2],
              };
            },
          },
          content: {
            offsetY: 36,
            style: {
              fontSize: "24px",
              color: "#4B535E",
            },
            formatter: () => "系统表现",
          },
        },
      });
      // 渲染
      gauge.render();
      let data = 0.7;
      const interval = setInterval(() => {
        if (data >= 1.5) {
          clearInterval(interval);
        }
        data += 0.005;
        gauge.changeData(data > 1 ? data - 1 : data);
      }, 100);
    };

    onMounted(initChart);
    return {
      root,
    };
  },
};
</script>